<template>
  <div class="news-dynamic">
    <div class="position">
      <span>当前位置&gt;<a href="javascript:void(0);">企业概况</a></span>
    </div>
    <div class="btn-wrap">
      <a href="javascript:void(0);" class="btn-nav" :class="{active: navIndex == 1}" @click="navIndex = 1">企业新闻</a>
      <a href="javascript:void(0);" class="btn-nav" :class="{active: navIndex == 2}" @click="navIndex = 2">行业动态</a>
    </div>
    <article-list :list="newsList" type="n"></article-list>
    <div class="loading" v-if="isLoading"></div>
    <button class="more-btn" @click="getNewsList" v-else>查看更多动态</button>
  </div>
</template>

<script>
  import articleList from 'COMPS/article-list/article-list.vue'
  import axios from 'axios'

  export default {
    name: 'news-dynamic',
    components: {
      articleList
    },
    data() {
      return {
        navIndex: 1,
        page: 1,
        newsList: [],
        isLoading: false
      }
    },
    mounted() {
      this.getNewsList();
    },
    methods: {
      getNewsList: function(){
        let that = this;
        this.isLoading = true;

        if (window.DEBUGGING) {
          return new Promise(function(resovle) {
            resovle([{
              img: 'http://pic2.52pk.com/files/120815/1283314_162030_3708.jpg',
              title: '《怪物猎人：世界》IGN评分9.5分',
              content: '游戏中的狩猎场景非常广阔，即使没有玩家参与，几个独立的生态系统也能完美地运转。这片丰茂的世界有着无尽的可能性。更重要的是，你可以在这片土地上耗费很长一段时间，仿佛居住在这里一般。《怪物猎人》系列一直都会给玩家带来丰富多彩的内容。从宏观角度讲，这是一款单一模式循环的动作RPG游戏。和现在很多的采集制造类游戏一样，你一开只有一身破烂装备，然后你承接狩猎任务，从怪物以及它们的栖息地获取材料，打造更强一点的装备，然后穿上装备去狩猎更强的怪物，打造更多的装备。游戏的美妙之处在于它提供了许多途径帮助你完成这个循环。',
              date: '2018-02-05'
            },{
              img: '',
              title: '《怪物猎人：世界》IGN评分9.5分',
              content: '游戏中的狩猎场景非常广阔，即使没有玩家参与，几个独立的生态系统也能完美地运转。这片丰茂的世界有着无尽的可能性。更重要的是，你可以在这片土地上耗费很长一段时间，仿佛居住在这里一般。《怪物猎人》系列一直都会给玩家带来丰富多彩的内容。从宏观角度讲，这是一款单一模式循环的动作RPG游戏。和现在很多的采集制造类游戏一样，你一开只有一身破烂装备，然后你承接狩猎任务，从怪物以及它们的栖息地获取材料，打造更强一点的装备，然后穿上装备去狩猎更强的怪物，打造更多的装备。游戏的美妙之处在于它提供了许多途径帮助你完成这个循环。',
              date: '2018-02-05'
            }])
          }).then((data) => {
            setTimeout(() => {
              console.log('当前页数:'+that.page);
              that.newsList = that.newsList.concat(data);
              that.page++;
              that.isLoading = false;
            },1000)
          })
        }

        axios.post('', {
          params: {
            page: that.page
          }
        }).then((data) => {
          that.newsList = that.newsList.concat(data.data);
          that.page++;
          that.isLoading = false;
        })
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .news-dynamic {
    text-align: center;
    .btn-wrap {
      margin-top: 50px;
      margin-bottom: 60px;
      .btn-nav {
        display: inline-block;
        width: 120px;
        line-height: 40px;
        margin: 0 5px;
        background-color: #fff;
        color: #47beda;
        border-radius: 2px;
        transition: all 0.2s;
        &.active {
          background-color: #47beda;
          color: #fff;
        }
      }
    }
    .news-list {
      .news-item {
        border-bottom: none;
        margin-bottom: 30px;
      }
    }
    .loading {
      margin: 0 auto;
      width: 32px;
      height: 32px;
      background-image: url(~IMGS/loading.gif);
    }
    .more-btn {
      cursor: pointer;
      outline: none;
      border: none;
      width: 240px;
      height: 40px;
      font-size: 14px;
      color: #fff;
      background-color: #47beda;
      &:hover {
        background-color: #6cd3eb;
      }
    }
  }
</style>